<template>
  <div class="loginContent">
    <div class="loginbox">
      <!--头像区 -->
      <div class="avater-box">
        <img src="../assets/img/wx.jpg" alt />
      </div>
      <!-- 登录表当区 -->
      <el-form
        ref="longFromref"
        :model="loginForm"
        label-width="0"
        :rules="loginFormRules"
        class="login-from"
      >
        <!-- 用户名 -->
        <el-form-item prop="userName">
          <el-input prefix-icon="elloginFromref-icon-s-custom" v-model=" loginForm.userName"></el-input>
        </el-form-item>
        <!-- 咪猫 -->
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-key" v-model="loginForm.password"></el-input>
        </el-form-item>
        <!-- 按钮区 -->
        <el-form-item class="btns">
          <el-button type="danger" plain @click="Login">登录</el-button>
          <el-button type="danger" plain @click="restLongFrom">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "登录页面",
      loginForm: {
        userName: "龙美女",
        password: "*******"
      },
      //表单验证规则对象
      loginFormRules: {
        //验证表当是否合法
        userName: [
          //鼠标失去焦点的时候
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到10 个字符", trigger: "blur" }
        ],
        //验证用户名是否正确
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 10个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    Login() {
      // this.$refs.longFromref.validate(async valid => {
      //   //valid是个布尔值
      //   if (!valid) return;
      //   const user = await this.$axios.post("login", this.loginForm);
      // });
      this.$refs.longFromref.validate(valid => {
        //valid是个布尔值
        if (!valid) return;
        this.$axios.post("login", this.loginForm);
        // if (msg.state !== 200) return this.$message.error('登录失败！')
        // console.log("登录成功");
        this.$message.success("登录成功");
        /*
        1.登录成功之后把token保存到客户端的sessionstorage中
        1.1：项目中除了登录之外的其他API接口，必须登录之后才能访问，
        所以我们必须要把登录的token保存到客户端中
        //那么因为localStrong是持久化的存储机制，sessionstorage是绘画之间的存储机制
        1.2：token只能在当前网站打开时生效，所以将token保存在sessionStorage中比较合适
        2.登录成功后通过编程式导航跳到后台主页,/home
        */
        //window.sessionStorage.setItem("token", res.data.token);
        this.$router.push("/home");
      });
    },
    //点击重置按钮调用resetFields重置登录框
    restLongFrom() {
      this.$refs.longFromref.resetFields();
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='less' scoped >
.loginContent {
  height: 100vh;
  background-image: -webkit-linear-gradient(0deg, pink, violet);
  .loginbox {
    width: 450px;
    height: 300px;
    background: #ffff;
    border-radius: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .avater-box {
    height: 80px;
    width: 80px;
    padding: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }
  .login-from {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .btns {
    display: flex;
    justify-content: space-around;
  }
}
</style> 

